<template>
  <view class="services-page">
    <!-- 快捷服务网格 -->
    <view class="service-grid">
      <view 
        v-for="service in serviceList" 
        :key="service.id"
        class="service-item"
        @click="handleService(service)"
      >
        <view class="service-icon" :style="{ background: service.color }">
          <u-icon :name="service.icon" color="#fff" size="20"></u-icon>
        </view>
        <text class="service-text">{{ service.text }}</text>
      </view>
    </view>
    
    <!-- 最新公告 -->
    <view class="announcement-section">
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">最新公告</text>
          <u-button 
            type="info" 
            size="small" 
            text="更多" 
            plain
            @click="viewMoreAnnouncements"
          ></u-button>
        </view>
        <view class="announcement-list">
          <view 
            v-for="announcement in announcements" 
            :key="announcement.id"
            class="announcement-item"
            @click="viewAnnouncement(announcement)"
          >
            <view class="announcement-icon">
              <u-icon name="file-text" color="#1890ff" size="16"></u-icon>
            </view>
            <view class="announcement-content">
              <text class="announcement-title">{{ announcement.title }}</text>
              <text class="announcement-time">{{ announcement.time }}</text>
            </view>
            <view class="announcement-badge" v-if="announcement.isTop">
              <u-tag text="置顶" type="warning" size="mini"></u-tag>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 热门活动 -->
    <view class="activity-section">
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">热门活动</text>
          <u-button 
            type="info" 
            size="small" 
            text="更多" 
            plain
            @click="viewMoreActivities"
          ></u-button>
        </view>
        <view class="activity-list">
          <view 
            v-for="activity in hotActivities" 
            :key="activity.id"
            class="activity-item"
            @click="viewActivity(activity)"
          >
            <view class="activity-image">
              <view class="activity-image-placeholder">
                <u-icon name="calendar" color="#fff" size="20"></u-icon>
              </view>
            </view>
            <view class="activity-info">
              <text class="activity-title">{{ activity.title }}</text>
              <text class="activity-time">{{ activity.time }}</text>
              <view class="activity-status">
                <u-tag :text="activity.statusText" :type="activity.statusType" size="mini"></u-tag>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 社区服务页面
 * @author Wu.Liang
 * @date 2025-01-21
 */

import { ref, onMounted } from 'vue'
// 服务列表数据
const serviceList = ref([
  {
    id: 1,
    text: '社区公告',
    icon: 'file-text',
    color: '#3742fa',
    action: 'announcement'
  },
  {
    id: 2,
    text: '活动报名',
    icon: 'calendar',
    color: '#2ed573',
    action: 'activity'
  },
  {
    id: 3,
    text: '便民服务',
    icon: 'tools',
    color: '#ff9500',
    action: 'service'
  },
  {
    id: 4,
    text: '社区团购',
    icon: 'shopping-cart',
    color: '#ff4757',
    action: 'group-buy'
  },
  {
    id: 5,
    text: '邻里互助',
    icon: 'heart',
    color: '#a55eea',
    action: 'mutual-aid'
  },
  {
    id: 6,
    text: '失物招领',
    icon: 'search',
    color: '#26de81',
    action: 'lost-found'
  },
  {
    id: 7,
    text: '二手交易',
    icon: 'gift',
    color: '#fd79a8',
    action: 'second-hand'
  },
  {
    id: 8,
    text: '更多服务',
    icon: 'more-dot-fill',
    color: '#636e72',
    action: 'more'
  }
])

// 公告数据
const announcements = ref([
  {
    id: 1,
    title: '关于小区电梯维修的通知',
    time: '2025-01-21 10:00',
    isTop: true
  },
  {
    id: 2,
    title: '春节期间物业服务安排',
    time: '2025-01-20 14:30',
    isTop: false
  },
  {
    id: 3,
    title: '小区环境整治活动通知',
    time: '2025-01-19 09:15',
    isTop: false
  }
])

// 热门活动数据
const hotActivities = ref([
  {
    id: 1,
    title: '社区春节联欢晚会',
    time: '2025-02-10 19:00',
    statusText: '报名中',
    statusType: 'success'
  },
  {
    id: 2,
    title: '健康义诊活动',
    time: '2025-01-25 09:00',
    statusText: '即将开始',
    statusType: 'warning'
  },
  {
    id: 3,
    title: '亲子阅读分享会',
    time: '2025-01-28 15:00',
    statusText: '报名中',
    statusType: 'success'
  }
])
// 处理服务点击
const handleService = (service) => {
  switch (service.action) {
    case 'announcement':
      uni.navigateTo({ url: '/pages/community-announcement/index' })
      break
    case 'activity':
      uni.navigateTo({ url: '/pages/activity-registration/index' })
      break
    case 'service':
      uni.navigateTo({ url: '/pages/convenience-service/index' })
      break
    case 'group-buy':
      uni.navigateTo({ url: '/pages/community-group-buying/index' })
      break
    case 'mutual-aid':
      uni.navigateTo({ url: '/pages/neighborly-mutual-aid/index' })
      break
    case 'lost-found':
      uni.navigateTo({ url: '/pages/lost-and-found/index' })
      break
    case 'second-hand':
      uni.navigateTo({ url: '/pages/second-hand-transaction/index' })
      break
    case 'data-analysis':
      uni.navigateTo({ url: '/pages/services/data-analysis' })
      break
    case 'more':
      uni.navigateTo({ url: '/pages/more-services/index' })
      break
  }
}

// 查看公告详情
const viewAnnouncement = (announcement) => {
  uni.navigateTo({ 
    url: `/pages/community-announcement/detail?id=${announcement.id}` 
  })
}

// 查看活动详情
const viewActivity = (activity) => {
  uni.navigateTo({ 
    url: `/pages/activity-registration/detail?id=${activity.id}` 
  })
}

// 查看更多公告
const viewMoreAnnouncements = () => {
  uni.navigateTo({ 
    url: '/pages/community-announcement/index' 
  })
}

// 查看更多活动
const viewMoreActivities = () => {
  uni.navigateTo({ 
    url: '/pages/activity-registration/index' 
  })
}

// 页面加载时初始化数据
onMounted(() => {
  // 生产环境不需要console.log
})
</script>

<style lang="scss" scoped>
.services-page {
  min-height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;
  padding: 16px 0 20px 0;
  margin: 0;
  box-sizing: border-box;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 16px;
  
  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 6px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    
    &:active {
      transform: scale(0.95);
    }
    
    .service-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }
    
    .service-text {
      font-size: 11px;
      color: #333;
      text-align: center;
    }
  }
}

.announcement-section,
.activity-section {
  margin: 0 16px 12px;
  
  .section-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 16px;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
      
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        position: relative;
        white-space: nowrap;
        flex: 1;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 0;
          width: 25px;
          height: 2px;
          background: linear-gradient(90deg, #1890ff, #52c41a);
          border-radius: 2px;
        }
      }
      
      :deep(.u-button) {
        border-radius: 8px;
        font-size: 11px;
        padding: 4px;
        width: 24px;
        height: 24px;
        transition: all 0.3s ease;
        flex-shrink: 0;
        margin-left: auto;
        
        &:active {
          transform: scale(0.95);
        }
      }
    }
  }
}

.announcement-list {
  .announcement-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s ease;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background-color: #f8f9fa;
      border-radius: 8px;
      margin: 0 -16px;
      padding-left: 16px;
      padding-right: 16px;
    }
    
    .announcement-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #f0f8ff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .announcement-content {
      flex: 1;
      
      .announcement-title {
        display: block;
        font-size: 14px;
        color: #333;
        font-weight: 500;
        margin-bottom: 4px;
        line-height: 1.4;
      }
      
      .announcement-time {
        display: block;
        font-size: 12px;
        color: #666;
      }
    }
    
    .announcement-badge {
      flex-shrink: 0;
      margin-left: 10px;
    }
  }
}

.activity-list {
  .activity-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s ease;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background-color: #f8f9fa;
      border-radius: 8px;
      margin: 0 -16px;
      padding-left: 16px;
      padding-right: 16px;
    }
    
    .activity-image {
      margin-right: 12px;
      flex-shrink: 0;
      
      .activity-image-placeholder {
        width: 70px;
        height: 52px;
        border-radius: 8px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
      }
    }
    
    .activity-info {
      flex: 1;
      
      .activity-title {
        display: block;
        font-size: 14px;
        color: #333;
        font-weight: 500;
        margin-bottom: 4px;
        line-height: 1.4;
      }
      
      .activity-time {
        display: block;
        font-size: 12px;
        color: #666;
        margin-bottom: 6px;
      }
      
      .activity-status {
        display: flex;
        justify-content: flex-start;
      }
    }
  }
}

// 响应式设计
@media screen and (max-width: 480px) {
  
  .announcement-section,
  .activity-section {
    margin: 0 12px 12px;
    
    .section-card {
      padding: 16px;
    }
  }
  
  .announcement-list .announcement-item,
  .activity-list .activity-item {
    padding: 12px 0;
    
    .announcement-icon {
      width: 36px;
      height: 36px;
      margin-right: 12px;
    }
    
    .activity-image {
      margin-right: 12px;
      
      .activity-image-placeholder {
        width: 70px;
        height: 52px;
      }
    }
  }
}

@media screen and (min-width: 414px) {
  .services-page {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
}
</style>